<script lang="ts">
  import { _ } from 'svelte-i18n';

  import { RichText } from '@mathesar/components/rich-text';
  import TableName from '@mathesar/components/TableName.svelte';
  import { Spinner } from '@mathesar-component-library';

  import type { EditableDataFormManager } from '../data-form-utilities/DataFormManager';
  import type { FkField } from '../data-form-utilities/fields';

  export let dataFormManager: EditableDataFormManager;
  export let dataFormField: FkField;

  $: ({ relatedTableOid } = dataFormField);
  $: linkedTableStructure = dataFormManager.getTableStructure(relatedTableOid);
  $: ({ isLoading, table } = linkedTableStructure);
</script>

<div class="sub-form-help">
  <RichText text={$_('form_fk_sub_form_help')} let:slotName>
    {#if slotName === 'tableName'}
      <span>
        {#if $isLoading}
          <Spinner />
        {:else if $table}
          <TableName table={$table} />
        {/if}
      </span>
    {/if}
  </RichText>
</div>

<style lang="scss">
  .sub-form-help {
    display: block;
    margin-bottom: var(--df__internal__element-spacing);
    color: var(--df__internal__help-text-color);

    span {
      display: inline-flex;
    }
  }
</style>
